<ng-template #template>
  <span [class]="className">
    <span class="svc-string-editor__content">
      <div class="svc-string-editor__border svc-string-editor__border--hover"></div>
        <div class="svc-string-editor__border svc-string-editor__border--focus"></div>
        <span class="svc-string-editor__input">
          <span role="textbox" *ngIf="!locString.hasHtml" class="sv-string-editor" spellcheck="false"
              (focus)="onFocus($event)" (paste)="onPaste($event)" (blur)="onBlur($event)" (beforeinput)="baseModel.onBeforeInput($event)" (input)="baseModel.onInput($event)" (keydown)="baseModel.onKeyDown($event)" (keyup)="baseModel.onKeyUp($event)" (compositionstart)="baseModel.onCompositionStart($event)" (compositionend)="baseModel.onCompositionEnd($event)" (mouseup)="baseModel.onMouseUp($event)" (click)="edit($event)" [textContent]="locString.renderedHtml" [attr.aria-placeholder]="placeholder" [attr.aria-label]="ariaLabel" [attr.contenteditable]="contentEditable" [attr.tabIndex]="baseModel.tabIndex" #container></span>
          <span role="textbox" *ngIf="locString.hasHtml" class="sv-string-editor sv-string-editor--html" spellcheck="false"
          (focus)="onFocus($event)" (blur)="onBlur($event)" (keydown)="baseModel.onKeyDown($event)" (keyup)="baseModel.onKeyUp($event)" (compositionstart)="baseModel.onCompositionStart($event)" (compositionend)="baseModel.onCompositionEnd($event)" (mouseup)="baseModel.onMouseUp($event)"
          (click)="edit($event)" [attr.aria-placeholder]="placeholder" [attr.aria-label]="ariaLabel" [attr.contenteditable]="contentEditable" [attr.tabIndex]="baseModel.tabIndex" [innerHtml]="locString.renderedHtml | safeHtml" #container></span>
          <sv-ng-character-counter *ngIf="showCharacterCounter" [counter]="characterCounter" [remainingCharacterCounter]="getCharacterCounterClass"></sv-ng-character-counter>
        </span>
    </span>
    <span *ngIf="errorText" class="svc-string-editor__error">{{errorText}}</span>
  </span>
</ng-template>